<template>
	<view class="" style="width: 100vw;height: 100vh">
	<!-- <view style="min-height: 100vh"> -->
	<view class="content" :style="{'background':kbackgroundColor}" style="min-height: 100vh">
	
		<!-- <image src="/static/login/login_bg.png" mode="scaleToFill" class="user_bg"></image> -->
		<hx-navbar title=" " :back="true" :fixed="true" :color="knavTitleColor" barPlaceholder="hidden" transparent="auto"></hx-navbar>
		<!-- <image src="/static/login/log_bg.png" mode="scaleToFill" class="bg"></image> -->
		<view class="code-title"  :style="{color:selectColorSize}" >请输入验证码</view>
		<view class="mobile-text">发送至+86 {{mobile}}</view>
		<view class="input_box">
			<view class="input_boxx notBtm">
				<!-- <view class="input_title">
					验证码
				</view> -->
				<view class="input_panel">
					<!-- 	<view class="input_left">
						验证码
					</view> -->
					<input type="text" class="inputer" placeholder="请输入验证码" v-model="code"
						placeholder-class="inputer_placeholder">
					<!-- @click="send_before" -->
					<view class="get_code"   :style="{color:selectColorSize}" @click="sliderVerifyFLag=true" v-if="verification">
						获取验证码
					</view>
					<view class="get_codeing" v-else>{{ timer }} 秒后重新获取</view>
				</view>
			</view>
			<view class="login_btn forgetCode"  :style="{background:buttonBcak}" @click="toCode()">下一步</view>
		</view>
		<slider-verify :isShow="sliderVerifyFLag" @touchSliderResultSuccess="verifyResult"
			@touchSliderResult="verifyResult" ref="verifyElement"></slider-verify>
	</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
		selectColorSize: this.$store.state.selectColorSize, //字体
				buttonBcak: this.$store.state.buttonBcak, //按钮颜色
				maxMobile: 11,
				mobile: '', // 用户手机号
				code: '', // 短信验证码
				verification: true, // 通过v-show控制显示获取还是倒计时
				timer: 60, // 定义初始时间为60s
				sliderVerifyFLag: false,
				code_img: ''
			}
		},
		onLoad(options) {
			if (options.mobile) {
				this.mobile = options.mobile
			}
		},
		methods: {
			// 滑块验证结果回调函数
			verifyResult(res) {
				this.sliderVerifyFLag = false
				if (res) {
					this.sendCode()
				} else {

				}

			},
			// 发送短信验证码
			sendCode() {
				// if (!this.tupian_code) {
				// 	this.$common.errorToShow('请输入图片验证码')
				// } else {
				this.$common.loadToShow('发送中...');
				// this.$refs.codebox.close()
				setTimeout(() => {
					this.$common.loadToHide();
					this.$api.sms({
						mobile: this.mobile,
						code: 'login',
						// captcha: this.tupian_code

					}, res => {
						if (res.status) {
							this.timer = 60;
							this.verification = false;
							this.$common.successToShow(res.msg);
							this.countDown(); // 执行验证码计时
							this.btnb = 'btn btn-square btn-all btn-b';
						} else {
							this.$common.errorToShow(res.msg);
						}
					});
				}, 1000);
				// }
			},
			// 验证码倒计时
			countDown() {
				let auth_timer = setInterval(() => {
					// 定时器设置每秒递减
					this.timer--; // 递减时间
					uni.setStorage({
						key: 'timer',
						data: this.timer,
						success: function() {}
					});
					if (this.timer <= 0) {
						this.verification = true; // 60s时间结束还原v-show状态并清除定时器
						clearInterval(auth_timer);
					}
				}, 1000);
			},
			toCode() {
				if (this.code == '') {
					this.$common.errorToShow('验证码不能为空！');
				} else {
					this.$api.checkSms({
						mobile: this.mobile,
						code: this.code
					}, res => {
						if (res.status) {
							this.$common.navigateTo('/pages/user/settings/forget/forget-pwd?mobile=' + this
								.mobile + '&code=' +
								this.code)
						} else {
							this.$common.errorToShow(res.msg)
						}
					})

				}


			}
		}
	}
</script>
<style>
	@import '/pages/login/login.css';
</style>